/**
 * 注册组件
 */
import React from 'react'
import {
  Button,
  NavBar,
  WhiteSpace,
  WingBlank,
  List,
  InputItem,
  Radio
} from 'antd-mobile'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { register } from '../../redux/action'
import Logo from '../../components/Logo/Logo'
const ListItem = List.Item
class Register extends React.Component {
  state = {
    username: '', //用户名
    password: '', //密码
    password2: '', //密码2
    type: 'laoban' //用户类型 dashen/laoban
  }
  // 注册的点击事件
  register = () => {
    this.props.register(this.state)
  }

  //   处理输入数据的改变，更新对应的状态
  handleChange = (val, name) => {
    //更新状态
    this.setState({
      [name]: val //属性名不是name，而是name的变量值
    })
  }
  render() {
    const { type } = this.state
    const { msg, redirectTo } = this.props.user
    if (redirectTo) {
      return <Redirect to={redirectTo} />
    }
    return (
      <div>
        <NavBar>硅&nbsp;谷&nbsp;直&nbsp;聘</NavBar>
        <Logo />
        <WingBlank>
          <List>
            {msg ? <div className="err_msg">{msg}</div> : null}
            <WhiteSpace />
            <InputItem
              placeholder="请输入用户名"
              onChange={val => {
                this.handleChange(val, 'username')
              }}
            >
              用户名:
            </InputItem>
            <WhiteSpace />
            <InputItem
              placeholder="请输入密码"
              type="password"
              onChange={val => {
                this.handleChange(val, 'password')
              }}
            >
              密&nbsp;&nbsp;&nbsp;码:
            </InputItem>
            <WhiteSpace />
            <InputItem
              placeholder="请输入确认密码"
              type="password"
              onChange={val => {
                this.handleChange(val, 'password2')
              }}
            >
              确认密码:
            </InputItem>
            <ListItem>
              <span>用户类型:</span>
              &nbsp;&nbsp;&nbsp;
              <Radio
                checked={type === 'dashen'}
                onChange={() => {
                  this.handleChange('dashen', 'type')
                }}
              >
                大神
              </Radio>
              &nbsp;&nbsp;&nbsp;
              <Radio
                checked={type === 'laoban'}
                onChange={() => {
                  this.handleChange('laoban', 'type')
                }}
              >
                老板
              </Radio>
            </ListItem>
            <WhiteSpace />
            <Button
              type="primary"
              onClick={() => {
                this.register()
              }}
            >
              注&nbsp;&nbsp;&nbsp;册
            </Button>
            &nbsp;&nbsp;&nbsp;
            <Button
              onClick={() => {
                this.props.history.replace('/login')
              }}
            >
              已有账号
            </Button>
          </List>
        </WingBlank>
      </div>
    )
  }
}
export default connect(state => ({ user: state.user }), { register })(Register)
